<!DOCTYPE html>
<html ng-app="gameApp">
	<head>
		<title>Citizen-Me</title>
		<link rel="stylesheet" href="css/app.css">
		<link rel="stylesheet" href="css/tiles.css">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-animate.min.js "></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.min.js "></script>
		<script type="text/javascript" src="scripts/app.js"></script>
		<script type="text/javascript" src="scripts/controllers/gameAreaCtrl.js"></script>
		<script type="text/javascript" src="scripts/directives/rightClickDirective.js"></script>
		<script type="text/javascript" src="scripts/services/priceService.js"></script>
		<script type="text/javascript" src="scripts/services/moneyService.js"></script>
		<script type="text/javascript" src="scripts/services/gridService.js"></script>
		<script type="text/javascript" src="scripts/services/tooltipService.js"></script>
	</head>
	<body ng-controller="gameAreaCtrl"  ng-right-click="resetCursor()">
			<div id="header">
			</div>
			<div id="game" ng-mouseleave="resetSelectedTile()">
				<!-- NEVER DELETE THIS COMMENT
					i = $parent.$index | $parent is needed to get to the outer scope created by row ng-repeat
					j = $index
				-->
				<div class="row" ng-repeat="i in range(50) track by $index">
					<div id="tile_{{$parent.$index}}_{{$index}}" class="tile" ng-repeat="j in range(50) track by $index" ng-mousedown="mouseDownTile($parent.$index, $index, $event)" ng-mouseup="mouseUpTile($parent.$index, $index, $event)" ng-mouseover="mouseHoverTile($parent.$index, $index)">

					</div>
				</div>
			</div>
			<div id="menu"> 

				<div id="categories">
					<p id="menuCategory{{i}}" class="menuCategory" ng-click="selectCategory(i)" ng-repeat="i in menuCategories">
						{{i | uppercase}}
					</p>
				</div>
				<div id="noCategorySelected" ng-show="noCategorySelected()">
					<p>Select a category to see buildings <br>and parts you can use.</p>
				</div>
				<div id="selectedCategory" ng-show="selectedCategory('residential')">
					<div class="scrollMenuTiles">
						<img id="menu_tile_{{i}}" class="menuTile" src="img/{{i}}.jpg" ng-click="selectElementToAdd(i)" ng-repeat="i in residentialTiles" ng-mouseover ="createToolTip($event, i)" ng-mouseleave = "unshowToolTip($event)">
					</div>
				</div>
				<div id="selectedCategory" ng-show="selectedCategory('commercial')">
					<div class="scrollMenuTiles">
						<img id="menu_tile_{{i}}" class="menuTile" src="img/{{i}}.jpg" ng-click="selectElementToAdd(i)" ng-repeat="i in commercialTiles" ng-mouseover ="createToolTip($event, i)" ng-mouseleave = "unshowToolTip($event)">
					</div>
				</div>
				<div id="selectedCategory" ng-show="selectedCategory('industrial')">
					<div class="scrollMenuTiles">
						<img id="menu_tile_{{i}}" class="menuTile" src="img/{{i}}.jpg" ng-click="selectElementToAdd(i)" ng-repeat="i in industrialTiles" ng-mouseover ="createToolTip($event, i)" ng-mouseleave = "unshowToolTip($event)">
					</div>
				</div>
				<div id="selectedCategory" ng-show="selectedCategory('misc')">
					<div class="scrollMenuTiles">
						<img id="menu_tile_{{i}}" class="menuTile" src="img/{{i}}.jpg" ng-click="selectElementToAdd(i)" ng-repeat="i in miscTiles" ng-mouseover ="createToolTip($event, i)" ng-mouseleave = "unshowToolTip($event)">
					</div>
				</div>
				<div id="gameDetails">
					<h2>DETAILS</h2>
					<p>
						${{money.value}}<br>{{updateTime}}s ({{money.incomeSign}}{{money.income}})
					</p>
				</div>
				<div id="gameOptions">
					<h2>OPTIONS</h2>
					<div class="optionsButtons" ng-click="showSaveArea();">
						Save
					</div>
					<div class="optionsButtons" ng-click="showLoadArea();">
						Load
					</div>
				</div>
			</div>
			<div id="tooltipElement" class="tooltipMenu" style="display:none;">
				<h2>{{tooltip.name}}</h2>
				{{tooltip.price}}$ ({{tooltip.income}}$)
			</div>
			<img id="downTooltip" class="downTooltip" src="img/downTooltip.png"/>
			<div id="saveLoadArea" ng-show="save()">
				<h2>Save Area</h2>
				<p ng-bind-html="saveJSON">
				</p>
			</div>	
			<div id="saveLoadArea" ng-show="load()">
				<h2>Load Area</h2>
				<p ng-bind-html="saveJSON">
				</p>
			</div>			
	</body>
</html>